<template>
  <div class="box" id="scroll_in2" ref="ad">
    <van-row class="rowqq">
      <van-col span="8">
        <van-button class="buttql" type="default">语音播报</van-button>
      </van-col>
      <van-col span="8">
        <van-button class="buttql" :disabled="CategoryStore==1 ? false : true" icon="play" @click="openaudio" ref="aa"
          type="default">播放</van-button>
      </van-col>
      <van-col span="8">
        <van-button class="buttql" icon="pause" id="ting" :disabled="CategoryStore==2 ? false : true"
          @click="openaudios" ref="bb" type="default">暂停</van-button>
      </van-col>
    </van-row>
    <!-- 语音 -->
    <audio ref="audio" class="aud">
      <source src="@/assets/mp3/sxwgcb.mp3" />
    </audio>
    <van-nav-bar style="margin-top:44px" title="- 请先阅读本通告 -" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="boxa">
        <h1 style="margin: 0 auto;">上下外国船舶许可服务指引</h1>
        <van-image width="100%" height="100%" :src="images" @click="jblba4" />
        <van-image-preview v-model="show3" :images="images">
        </van-image-preview>
        <h3>一、适用范围</h3>
        <p>本指引适用于上下外国船舶许可的申请和办理。</p>
        <h3>二、事项审查类型</h3>
        <p>上下外国船舶许可分为临时上下外国船舶许可和长期上下外国船舶许可。临时许可在本航次或1个月内有效，长期许可有效期为1个月以上1年以下。个人可申请办理临时上下外国船舶许可，单位可申请办理临时或长期上下外国船舶许可。</p>
        <p>临时上下外国船舶许可申请即审即办，长期上下外国船舶许可申请前审后批。</p>
        <h3>三、审批依据</h3>
        <p>中华人民共和国出境入境管理法》第五十四条第一款；《中华人民共和国出境入境边防检查条例》第十二条。</p>
        <h3>四、受理机构</h3>
        <p>日照出入境边防检查站</p>
        <h3>五、决定机构</h3>
        <p>日照出入境边防检查站</p>
        <h3>六、数量限制</h3>
        <p>无数量限制，根据实际工作情况办理。</p>
        <h3>七、申请条件</h3>
        <p>因装卸物品、维修作业、参观访问、探望亲属、随船工作等事由需要上下外国船舶的人员，由其本人或其所在单位、用人单位负责人、船舶负责人或其出境入境业务代理单位按规定向出入境边防检查站提交相关材料，申请办理上下外国船舶许可。
        </p>
        <h3>八、禁止性要求</h3>
        <p>对不属于出入境边防检查站职权范围的申请，不予受理。对具有以下情形之一的，不予许可：</p>
        <p>（一）具有《中华人民共和国出境入境管理法》第十二条（第（一）项除外）、第二十八条规定情形之一的；</p>
        <p>（二）申请过程中弄虚作假的；</p>
        <p>（三）涉嫌非法出境入境或者从事其他违法犯罪活动的；</p>
        <p>（四）1年内在申请上下外国船舶许可过程中存在弄虚作假情形的，或者1年内违反出入境管理法律法规受到处罚的。</p>
        <h3>九、申请材料目录</h3>
        <p>上下外国船舶许可申请表。</p>
        <h3>十、办理基本流程</h3>
        <p>（一）申请人按照规定向出入境边防检查站提交申请材料。</p>
        <p>（二）出入境边防检查站对申请材料齐全且符合法定形式的，予以受理并出具《受理单》。能够当即办理的，直接签发《上下外国船舶许可证》，不再出具《受理单》。</p>
        <p>对材料缺失或不符合法定形式的，出具《一次性告知单》，一次性告知申请人补齐。</p>
        <p>对不予受理的，告知申请人不予受理的理由和依据，并出具《不予受理通知书》。</p>
        <p>（三）出入境边防检查站对申请材料的真实性、有效性、完整性进行审核。</p>
        <p>（四）对临时上下外国船舶的申请，出入境边防检查站当场做出是否准予的决定；对长期上下外国船舶的申请，自受理之日起5个工作日内做出是否准予的决定。不予许可的，出具《不予许可通知书》。</p>
        <h3>十一、办结时限</h3>
        <p>临时上下外国船舶许可的申请，当场办结；长期上下外国船舶许可的申请，自受理之日起5个工作日内办结。</p>
        <h3>十二、收费依据及标准</h3>
        <p>不收费。</p>
        <h3>十三、结果送达</h3>
        <p>临时上下外国船舶许可当场送达。长期上下外国船舶许可自出入境边防检查站作出决定之日起10日内，申请人凭《受理单》前往受理点领取。</p>
        <p>对于已开通网上办证服务的边检机关，上下外国船舶许可可以通过互联网进行签发。</p>
        <h3>十四、监督投诉渠道</h3>
        <p>日照出入境边防检查站 山东省日照市山东路627号（276800） 0633-7900028</p>
        <h3>十五、办公地址和时间</h3>
        <p>（一）办公地址：</p>
        <p>边检机关：山东省日照市东港区山东路627号1楼东</p>
        <p>电话：0633-7900028</p>
        <p>东港警务室：山东省日照市东港区石臼街道上海路东首2号门内东港区边检办公楼</p>
        <p>电话：0633-7900050</p>
        <p>南港警务室：山东省日照市东港区石臼街道北京路南首10号门内南区综合办公楼6楼</p>
        <p>电话：0633-7900060</p>
        <p>（二）办公时间：24小时</p>
        <!-- <div class="sj">
          <div>日照出入境边防检查站</div>
          <div>2023年5月5日</div>
        </div> -->
      </div>
    </van-pull-refresh>
    <van-button round type="info" size="large" class="yd" @click="tznr">我已知晓</van-button>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
        isLoading: false,
        backgroundColor: 'white',
        music1: "",
        CategoryStore: "1",
        images: [
          require('@/assets/image/shangxia.png')
        ],
        show3: false,
      };

    },

    created() {
      this.openaudios()
    },
    mounted() {
      this.openaudios()
    },
    methods: {
      jblba4() {
        this.show3 = true
      },
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
          this.count++;
        }, 1000);
      },
      async tznr() {
        if (this.CategoryStore == 2) {
          this.$toast.fail('请先点击暂停');
        } else {
          await this.$router.push('/blcrj')
        }

      },
      openaudios() {
        this.$refs.aa.style.backgroundColor = "white"
        this.$refs.bb.style.backgroundColor = "blue"
        this.$refs["audio"].pause();
        this.CategoryStore = 1
      },
      openaudio() {
        this.$refs.aa.style.backgroundColor = "blue"
        this.$refs.bb.style.backgroundColor = "white"
        this.CategoryStore = 2
        this.autoSroll("scroll_in2");
        this.$refs["audio"].play();

      },
      autoSroll(Id) {
        var flag = false;
        // 定时器 
        var timer;

        function roll() {
          var h = -1;
          timer = setInterval(function () {
            flag = true;
            // h = 0
            //获取当前滚动条高度
            var current = document.getElementById(Id).scrollTop;
            if (current == h) {
              //滚动到底端,返回顶端 
              // h = 0;
              document.getElementById(Id).scrollTop = h + 1;
            } else {
              //以25ms/3.5px的速度滚动 
              h = current;
              document.getElementById(Id).scrollTop = h + 1;
            }
          }, 130);
        }
        setTimeout(function () {
          //滚动区域内单击鼠标 滚动暂停 再次点击鼠标 继续滚动 
          document.getElementById("ting").onclick = () => {
            if (flag) {
              flag = false;
              clearInterval(timer);
            } else {
              roll();
            }
          };
          roll();
        }, 2000);
      },
    },
    beforeRouteLeave(to, from, next) {
      if (this.CategoryStore == 2) {
        this.$toast.fail('请先点击暂停');
      } else {
        next()
      }
    },
  };
</script>

<style scoped>
  .rowqq {
    /* position: -webkit-sticky; */
    /* position: fixed; */
    position: absolute;
    width: 100%;
    z-index: 9999;
    background-color: aliceblue;
  }

  .buttql {
    width: 100%;
  }

  .box {
    height: 100vh;
    overflow: auto;
  }

  p {
    text-indent: 2em;
  }

  h3 {
    text-indent: 2em;
  }

  h1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  }

  .sj {
    position: relative;
    left: 15%;
    margin: 10px;
    text-align: center;
  }

  .boxa {
    margin: 10px;
    font-size: 19px;

  }

  .yd {
    margin-bottom: 15px;
  }
</style>